<template>
<div>
    借款款项名称:<input type="text" v-model="B_Name"> 
    利息：
    <select v-model="BI_Id">
       <option value="0">--请选择--</option>
        <option v-for="item in selinfo" :key="item.BI_Id" :value="item.BI_Id">{{ item.BI_Year }}年利息{{ item.BI_Interest }}%</option>
    </select>
    <input type="button" value="查询" @click="LoadShow">

    <table class="table table-bordered">
        <thead>
            <tr style="background-color: aqua;">
                <td>借款款项ID</td>
                <td>借款款项名称</td>
                <td>借款最高金额</td>
                <td>借款最高年限</td>
                <td>预计月还款金额</td>
                <td>利息值</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info" :key="item.B_Id">
                <td>{{item.B_Id}}</td>
                <td>{{item.B_Name}}</td>
                <td>{{item.B_MaxMoney}}</td>
                <td>{{item.B_Year}}</td>
                <td>{{((item.B_MaxMoney+(item.B_MaxMoney*item.BI_Interest/100))/item.B_Year/12).toFixed(2)}}CNY</td>
                <td>{{ item.BI_Interest }}</td>
                <td>
                    <slot :id="item.B_Id"></slot>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共有{{ Page.totalCount }}条，每页显示{{ Page.PageSize }}条，当前{{ Page.PageIndex }}/{{ Page.PageCount }}页
        <a href="#" @click="PageLoad('F')">首页</a>
        <a href="#" @click="PageLoad('U')">上一页</a>
        <a href="#" @click="PageLoad('N')">下一页</a>
        <a href="#" @click="PageLoad('E')">尾页</a> 
    </span>
    </div>
</template>


<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();

//创建响应式数据 用于下拉框
const selinfo=ref([{
    BI_Id:0,
    BI_Year:0,
    BI_Interest:0
}])


//创建响应式数据 用于显示
const info=ref([{
    B_Id:0,
    B_Name:'',
    B_MaxMoney:0,
    B_Year:0,
    B_Info:'',
    BI_Interest:0,
}])

//创建响应式数据 用于分页
const Page=ref({
    PageIndex:1,
    PageSize:2,
    totalCount:0,
    PageCount:0
})

//创建响应式数据 用于查询
const B_Name=ref('');
const BI_Id=ref(0);

onMounted(()=>{
    ShowInterest();
    LoadShow();
})

//加载数据
const ShowInterest=()=>{
    axios.get("https://localhost:44321/api/Borrows/ShowBInterest")
    .then(res=>{
        selinfo.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}

//显示+查询
const LoadShow=()=>{
    axios.get('https://localhost:44321/api/Borrows/ShowBorrowMoney',{
        params:{
            Bname:B_Name.value,
            BIid:BI_Id.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(res=>{
        info.value=res.data.list;
        Page.value.totalCount=res.data.totalCount;
        Page.value.PageCount=res.data.PageCount;
    })
    .catch(error=>{
        console.log(error);
    })
}

//完成分页的跳转显示功能
const PageLoad=(choose:string)=>{
    switch(choose){
        case 'F':
            Page.value.PageIndex=1;
        break;
        case 'E':
            Page.value.PageIndex=Page.value.PageCount;
        break;
        case 'U':
            if(Page.value.PageIndex>1){
                Page.value.PageIndex--;
            }
            else{
                alert('当前已经是首页了');
            }
        break;
        case 'N':
        if(Page.value.PageIndex<Page.value.PageCount){
                Page.value.PageIndex++;
            }
            else{
                alert('当前已经是尾页了');
            }
        break;
    }
    LoadShow();
}
</script>